<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .preview_wrap {
            position: relative;
            width: 400px;
            height: 590px;
        }
        
        .preview_img {
            position: relative;
            width: 398px;
            border: 1px solid #ccc;
        }
        
        .maks {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 300px;
            height: 300px;
            background-color: #FEDE4F;
            display: none;
            opacity: .5;
            cursor: move;
        }
        
        .big {
            position: absolute;
            left: 410px;
            top: 0;
            width: 500px;
            height: 500px;
            display: none;
            background-color: pink;
            z-index: 999;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        
        .big img {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>

    <script>
        window.addEventListener('load', function() {
            var preview_img = document.querySelector('.preview_img');
            var mask = document.querySelector('.maks');
            var big = document.querySelector('.big');
            // 1. 鼠标经过显示 mask 和 big
            preview_img.addEventListener('mouseover', function() {
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            preview_img.addEventListener('mouseout', function() {
                mask.style.display = 'none';
                big.style.display = 'none';
            })

            preview_img.addEventListener('mousemove', function(e) {
                // mask 跟随鼠标移动
                // 鼠标在预览图片的位置
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // mask 的位置
                var maskX = x - mask.offsetWidth / 2
                var maskY = y - mask.offsetHeight / 2
                    // mask 能移动的最大值
                var maskMax = preview_img.offsetWidth - mask.offsetWidth;
                if (maskX <= 0) {
                    maskX = 0;
                } else if (maskX >= maskMax) {
                    maskX = maskMax;
                }
                if (maskY <= 0) {
                    maskY = 0;
                } else if (maskY >= maskMax) {
                    maskY = maskMax;
                }
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
                // 设置预览大图位置
                var bigImg = document.querySelector('.bigImg');
                // 大图的最大移动距离
                var bigMax = bigImg.offsetWidth - big.offsetWidth;
                // 大图的移动距离
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                // 设置大图 大图与预览图的方向是相反的所有为负值
                bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
        })
    </script>
</head>

<body>
    <div class="preview_wrap">
        <div class="preview_img">
            <img src="imgs/s3.png" alt="">
            <!-- 黄色遮挡层 -->
            <div class="maks">

            </div>
            <!-- 大图区域 -->
            <div class="big">
                <img class="bigImg" src="imgs/big.jpg" alt="">
            </div>
        </div>
    </div>
</body>

</html>